[CSS] Media query, 디바이스별 미디어쿼리 설정

안녕하세요! 모바일 웹페이지 제작을 위한 디바이스별 CSS 미디어쿼리(media query)를 아래에 정리하고 있습니다. 미디어 쿼리는 반응형 웹을 구현하는데 매우 중요한 css 스킬입니다. 처음 등장하였을 때는 기준이 되는 기준 resolution이 없었으나 현재는 많이 다릅니다. 아래와 같은 기준이 많이 쓰이지 않죠...

요즘은 모바일의 경우 786px을 기준으로 구분하는 것이 대부분입니다. 테블릿과 랩탑의 경우는 비슷하기 때문에 굳이 구분할 필요는 없습니다. 그렇다면 각각의 디바이스에서 적용 가능한 resolution size를 알아보도록 하겠습니다.


1. iPhone
- Resolution : 320 x 480

2. iPhone 4 이상 Retina 디스플레이
- Resolution : 320 x 480
- Pixel Density : 2

3. Samsung Galaxy S I, II
- Resolution : 480 x 800
- Pixel Density : 1.5

4. Samsung Galaxy S III
- Resolution : 720 x 1280


i. iPad 1, 2
- Resolution : 720 x 1280

ii. new iPad
- Resolution : 1536 x 2048
- Pixel Density : 2

요즘은 새로운 디바이스가 많이 나와있습니다.